<template>
  <div class="taskInfo">
    <div class="taskInfo-top">
      <div class="taskInfo-top-tittle">任务详情</div>
    </div>
    <div class="taskInfo-body">
      <div class="taskInfo-body-box">
        <div class="taskInfo-body-box-tittle">
          <div class="taskInfo-body-box-tittle-left"></div>
          <div class="taskInfo-body-box-tittle-right">任务信息</div>
        </div>
        <div class="taskInfo-body-box-info">
          <a-descriptions
            bordered
            :labelStyle="{ width: '160px' }"
            :content-style="{ color: '#444444', width: 'calc(100% / (24 / 6))' }"
            :column="{ xxl: 3, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }"
          >
            <a-descriptions-item label="任务编号" :span="1" v-if="taskData?.taskNo">{{
              taskData?.taskNo
            }}</a-descriptions-item>
            <a-descriptions-item label="检查类型" :span="1" v-if="taskData?.checkTypeName">{{
              taskData?.checkTypeName
            }}</a-descriptions-item>
            <a-descriptions-item label="任务状态" :span="1" v-if="taskData?.taskStatus">{{
              caseTaskStatus(taskData?.taskStatus)
            }}</a-descriptions-item>
            <a-descriptions-item label="主办人" :span="1" v-if="taskData?.checkerName">{{
              taskData?.checkerName
            }}</a-descriptions-item>
            <a-descriptions-item label="检查时间" :span="1" v-if="taskData?.endCheckTime">{{
              taskData?.endCheckTime
            }}</a-descriptions-item>
            <a-descriptions-item label="检查结果" :span="1" v-if="taskData?.checkResult">
              <div :class="caseCheckResultClass(taskData?.checkResult)">
                {{ caseCheckResult(taskData?.checkResult) }}</div
              >
            </a-descriptions-item>
            <a-descriptions-item label="协办人" :span="1" v-if="taskData?.organizerName">{{
              taskData?.organizerName
            }}</a-descriptions-item>
            <a-descriptions-item
              label="限期提醒"
              :span="1"
              v-if="taskData?.taskStatus === 1 || taskData?.taskStatus === 2"
            >
              <div
                class="tigs"
                :style="{
                  backgroundColor:
                    taskData?.reminderType === 1
                      ? '#1677FF'
                      : taskData?.reminderType === 2
                      ? '#F5820F'
                      : taskData?.reminderType === 3
                      ? '#FAD20B'
                      : '#E22C4C',
                }"
              ></div>
            </a-descriptions-item>
          </a-descriptions>
        </div>
      </div>
      <div class="taskInfo-body-box">
        <div class="taskInfo-body-box-tittle">
          <div class="taskInfo-body-box-tittle-left"></div>
          <div class="taskInfo-body-box-tittle-right">基本信息</div>
        </div>
        <div class="taskInfo-body-box-info">
          <a-descriptions
            :labelStyle="{ width: '160px' }"
            :content-style="{ color: '#444444', width: 'calc(100% / (24 / 6))' }"
            :column="{ xxl: 3, xl: 3, lg: 3, md: 3, sm: 2, xs: 1 }"
            bordered
          >
            <a-descriptions-item label="当事人类型" :span="1">{{
              casePartyType(taskData?.placeInfo.partyType)
            }}</a-descriptions-item>
            <a-descriptions-item
              :label="casePlaceName(taskData?.placeInfo.partyType)"
              :span="1"
              v-if="taskData?.placeInfo.placeName"
              >{{ taskData?.placeInfo.placeName }}</a-descriptions-item
            >
            <a-descriptions-item
              label="性别"
              :span="1"
              v-if="taskData?.placeInfo.sex && taskData?.placeInfo.partyType != 2"
              >{{ caseSex(taskData?.placeInfo.sex) }}</a-descriptions-item
            >
            <a-descriptions-item label="出生日期" :span="1" v-if="taskData?.placeInfo.birthDate">{{
              taskData?.placeInfo.birthDate
            }}</a-descriptions-item>
            <a-descriptions-item
              :label="caseContactsTel(taskData?.placeInfo.partyType)"
              :span="1"
              v-if="taskData?.placeInfo.contactsTel"
              >{{ taskData?.placeInfo.contactsTel }}</a-descriptions-item
            >
            <a-descriptions-item
              label="证照类型"
              :span="1"
              v-if="taskData?.placeInfo.idTypeName != ''"
              >{{ taskData?.placeInfo.idTypeName }}</a-descriptions-item
            >
            <a-descriptions-item
              :label="caseIdcode(taskData?.placeInfo.partyType)"
              :span="1"
              v-if="taskData?.placeInfo.idCode"
              >{{ taskData?.placeInfo.idCode }}</a-descriptions-item
            >
            <!-- <a-descriptions-item label="安全等级" :span="1">
              <div :style="caseSafeLevel(taskData?.placeInfo.safeLevel)">
                {{ caseSafeLevel2(taskData?.placeInfo.safeLevel) }}
              </div>
            </a-descriptions-item> -->
            <a-descriptions-item
              :label="caseHeadName(taskData?.placeInfo.partyType)"
              :span="1"
              v-if="taskData?.placeInfo.headName"
              >{{ taskData?.placeInfo.headName }}</a-descriptions-item
            >
            <a-descriptions-item
              :label="caseHeadTel(taskData?.placeInfo.partyType)"
              :span="1"
              v-if="taskData?.placeInfo.headTel && taskData?.placeInfo.partyType != 2"
              >{{ taskData?.placeInfo.headTel }}</a-descriptions-item
            >
            <a-descriptions-item
              :label="caseRegister(taskData?.placeInfo.partyType)"
              :span="1"
              v-if="
                taskData?.placeInfo.registerCity &&
                taskData?.placeInfo.registerCounty &&
                taskData?.placeInfo.registerTown &&
                taskData?.placeInfo.registerAddress &&
                taskData?.placeInfo.partyType != 0
              "
              >{{
                taskData?.placeInfo.registerCity +
                taskData?.placeInfo.registerCounty +
                taskData?.placeInfo.registerTown +
                taskData?.placeInfo.registerAddress
              }}</a-descriptions-item
            >
            <a-descriptions-item :label="caseOperate(taskData?.placeInfo.partyType)" :span="1">{{
              taskData?.placeInfo.operateCity +
              taskData?.placeInfo.operateCounty +
              taskData?.placeInfo.operateTown +
              taskData?.placeInfo.operateAddress
            }}</a-descriptions-item>
            <!-- <a-descriptions-item
              label="经纬度"
              :span="1"
              v-if="taskData?.placeInfo.partyType == 1 || taskData?.placeInfo.partyType == 3"
            >
              <a-input v-model:value="tudeValue" readonly style="width: 50%" />
              <a-button @click="openMap" style="color: #666666 !important; margin-left: 8px">{{
                taskData?.mapUpdFlag == 0 ? '查看地图' : '选择地点'
              }}</a-button>
            </a-descriptions-item> -->
          </a-descriptions>
        </div>
      </div>
      <div class="taskInfo-body-box" v-if="taskCheckFillList?.length != 0 || taskData?.photoList">
        <div class="taskInfo-body-box-tittle">
          <div class="taskInfo-body-box-tittle-left"></div>
          <div class="taskInfo-body-box-tittle-right">检查信息</div>
        </div>
        <div class="taskInfo-body-box-info" v-if="hasShowImg">
          <div>
            <a-descriptions
              :labelStyle="{ width: '160px' }"
              :content-style="{ color: '#444444' }"
              bordered
            >
              <a-descriptions-item label="隐患信息" :span="3">
                <div v-if="taskCheckFillList?.length > 1">
                  <div v-for="(item, index) in taskCheckFillList">
                    <span>{{ index + 1 }} 、</span>
                    <div>
                      <a-descriptions
                        :labelStyle="{ width: '160px' }"
                        :content-style="{ color: '#444444' }"
                        bordered
                      >
                        <a-descriptions-item label="隐患内容" :span="3">{{
                          item.dangerDesc
                        }}</a-descriptions-item>
                        <a-descriptions-item label="隐患照片" :span="3">
                          <a-space>
                            <a-image
                              v-for="(items, index) in item.photoUrls"
                              :key="index"
                              :width="80"
                              :height="80"
                              :src="items"
                              :style="{ borderRadius: '4px' }" /></a-space
                        ></a-descriptions-item>
                      </a-descriptions>
                    </div>
                  </div>
                </div>
                <div v-else-if="taskCheckFillList?.length == 1">
                  <div v-for="(item, index) in taskCheckFillList">
                    <div v-if="item.dangerDesc != ''">
                      <div>{{ index + 1 }} 、</div>
                      <div>
                        <a-descriptions
                          :labelStyle="{ width: '160px' }"
                          :content-style="{ color: '#444444' }"
                          bordered
                        >
                          <a-descriptions-item label="隐患内容" :span="3">{{
                            item.dangerDesc
                          }}</a-descriptions-item>
                          <a-descriptions-item label="隐患照片" :span="3">
                            <a-space>
                              <a-image
                                v-for="(items, index) in item.photoUrls"
                                :key="index"
                                :width="80"
                                :height="80"
                                :src="items"
                                :style="{ borderRadius: '4px' }"
                              >
                              </a-image> </a-space
                          ></a-descriptions-item>
                        </a-descriptions>
                      </div>
                    </div>
                    <div v-else>-</div>
                  </div>
                </div>
                <div v-else>-</div>
              </a-descriptions-item>
              <!-- <a-descriptions-item label="其他事项" :span="1" v-if="item.others">
                  {{ item.others }}
                </a-descriptions-item>
                <a-descriptions-item label="具体情形" :span="1" v-if="item.specific">
                  {{ item.specific }}
                </a-descriptions-item>
                <a-descriptions-item label="抽查部位" :span="1" v-if="item.spot">
                  {{ item.spot }}
                </a-descriptions-item> -->
              <a-descriptions-item label="场所照片" :span="3" v-if="taskData?.photoList">
                <a-image-preview-group>
                  <a-space>
                    <a-image
                      v-for="(item, index) in photoList"
                      :key="index"
                      :width="80"
                      :height="80"
                      :src="item"
                      :style="{ borderRadius: '4px' }"
                  /></a-space>
                </a-image-preview-group>
              </a-descriptions-item>
              <a-descriptions-item
                label="营业执照/身份证"
                :span="3"
                v-if="taskData?.buseLicenceList"
              >
                <a-image-preview-group>
                  <a-space>
                    <a-image
                      v-for="(item, index) in buseLicenceList"
                      :key="index"
                      :width="80"
                      :height="80"
                      :style="{ borderRadius: '4px' }"
                      :src="item"
                  /></a-space>
                </a-image-preview-group>
              </a-descriptions-item>
              <a-descriptions-item label="检查员签字" :span="2" v-if="taskData?.checkerSign">
                <a-space>
                  <a-button type="link" style="color: #1764ce" @click="() => setVisible(true)"
                    >查看签名</a-button
                  >
                  <a-button type="link" style="color: #1764ce" @click="() => setVisibles(true)"
                    >查看签名</a-button
                  >
                </a-space>

                <a-image
                  :width="200"
                  :style="{ display: 'none' }"
                  :preview="{
                    visible: visible,
                    onVisibleChange: setVisible,
                  }"
                  :src="checkerSign[0]"
                />
                <a-image
                  :width="200"
                  :style="{ display: 'none' }"
                  :preview="{
                    visible: visibles,
                    onVisibleChange: setVisibles,
                  }"
                  :src="checkerSign[1]"
                />
              </a-descriptions-item>
              <a-descriptions-item
                label="被检查单位随同人员签字"
                :span="2"
                v-if="taskData?.enterpriserSign"
              >
                <a-button type="link" style="color: #1764ce" @click="() => setVisibless(true)"
                  >查看签名</a-button
                >
                <a-image
                  :width="200"
                  :style="{ display: 'none' }"
                  :preview="{
                    visible: visibless,
                    onVisibleChange: setVisibless,
                  }"
                  :src="enterpriserSign"
                />
              </a-descriptions-item>
              <a-descriptions-item label="备注" :span="3" v-if="taskData?.remark">
                {{ taskData?.remark }}
              </a-descriptions-item>
            </a-descriptions>
          </div>
        </div>
      </div>
      <div class="taskInfo-body-box" v-if="taskData?.processType">
        <div class="taskInfo-body-box-tittle">
          <div class="taskInfo-body-box-tittle-left"></div>
          <div class="taskInfo-body-box-tittle-right">任务信息</div>
        </div>
        <div class="taskInfo-body-box-info">
          <a-descriptions bordered :labelStyle="{ width: '160px' }">
            <a-descriptions-item label="处理方式" :span="3">{{
              renderType(taskData?.processType)
            }}</a-descriptions-item>
            <a-descriptions-item
              v-if="taskData?.processType.includes(2)"
              label="是否复查"
              :span="3"
              >{{ ['否', '是'][taskData?.reviewVal] }}</a-descriptions-item
            >
          </a-descriptions>
        </div>
      </div>
      <GaodeMap
        :dialogMap="open"
        :longiTudeMap="longiValue"
        :latiTudeMap="latiValue"
        :valueMap="tudeValue"
        :mapUpdFlag="mapUpdFlag"
        @submitMap="submitMap"
        @closeMap="closeMap"
      ></GaodeMap>
    </div>
  </div>
</template>
<script setup lang="ts">
  import { useRoute } from 'vue-router';
  import { ref, onMounted, reactive } from 'vue';
  import { bindFileUrl } from '@/api/account';
  import { taskxfInfo } from '@/api/supervision/task-management';
  import { updMapMsg } from '@/api/routine';
  import GaodeMap from '@/views/supervision/task-view/map/GaodeMap/index.vue';

  const route = useRoute();
  defineOptions({
    name: 'taskInfo',
  });
  const visible = ref<boolean>(false);
  const visibles = ref<boolean>(false);
  const visibless = ref<boolean>(false);
  const hasShowImg = ref(false);

  const setVisible = (value): void => {
    visible.value = value;
  };
  const setVisibles = (value): void => {
    visibles.value = value;
  };
  const setVisibless = (value): void => {
    visibless.value = value;
  };
  interface PropsInfo {
    id: any;
  }
  const props = withDefaults(defineProps<PropsInfo>(), {
    id: '',
  });

  const taskData = ref();
  const taskCheckFillList = ref([] as any);

  //经纬度
  const open = ref<boolean>(false);
  const tudeValue = ref('');
  const longiValue = ref('');
  const latiValue = ref('');
  const mapUpdFlag = ref('');

  const formState = reactive({
    longitude: '', //经度
    latitude: '', //维度
  });

  const openMap = () => {
    open.value = true;
    longiValue.value = formState.longitude;
    latiValue.value = formState.latitude;
    mapUpdFlag.value = taskData.value?.mapUpdFlag;
  };

  const submitMap = async (data: any) => {
    if (data[0] && data[1]) {
      tudeValue.value = `${data[0]}, ${data[1]}`;
      formState.longitude = data[0];
      formState.latitude = data[1];
    } else if (formState.longitude && formState.latitude) {
      tudeValue.value = `${formState.longitude}, ${formState.latitude}`;
    } else {
      tudeValue.value = '';
    }
    let parm = {
      id: taskData.value.placeInfo.id,
      longitude: formState.longitude,
      latitude: formState.latitude,
    };

    const res = await updMapMsg(parm);
    if (res.code == 0) {
      open.value = false;
    }
  };
  const closeMap = () => {
    open.value = false;
    // tudeValue.value = '';
  };

  const casePlaceName = (val) => {
    switch (val) {
      case 0:
        return '姓名';
      case 1:
        return '单位名称';
      case 2:
        return '字号名称';
      case 3:
        return '单位名称';
      default:
        return '-';
    }
  };

  const caseContactsTel = (val) => {
    switch (val) {
      case 0:
        return '联系电话';
      case 1:
        return '单位联系电话';
      case 2:
        return '单位联系电话';
      case 3:
        return '单位联系电话';
      default:
        return '-';
    }
  };

  const caseIdcode = (val) => {
    switch (val) {
      case 0:
        return '证件号码';
      case 1:
        return '社会统一信用代码';
      case 2:
        return '社会统一信用代码';
      case 3:
        return '社会统一信用代码';
      default:
        return '-';
    }
  };

  const caseHeadName = (val) => {
    switch (val) {
      case 0:
        return '';
      case 1:
        return '法人';
      case 2:
        return '经营者姓名';
      case 3:
        return '负责人';
      default:
        return '-';
    }
  };

  const caseHeadTel = (val) => {
    switch (val) {
      case 0:
        return '';
      case 1:
        return '法人电话';
      case 2:
        return '';
      case 3:
        return '负责人电话';
      default:
        return '-';
    }
  };

  const caseRegister = (val) => {
    switch (val) {
      case 0:
        return '地址';
      case 1:
        return '注册地址';
      case 2:
        return '注册地址';
      case 3:
        return '注册地址';
      default:
        return '-';
    }
  };

  const caseOperate = (val) => {
    switch (val) {
      case 0:
        return '地址';
      case 1:
        return '经营地址';
      case 2:
        return '经营地址';
      case 3:
        return '经营地址';
      default:
        return '-';
    }
  };

  const casePartyType = (val) => {
    switch (val) {
      case 0:
        return '自然人';
      case 1:
        return '法人';
      case 2:
        return '个体工商户';
      case 3:
        return '非法人组织';
      default:
        return '-';
    }
  };

  const caseCheckResult = (val) => {
    switch (val) {
      case 1:
        return '合格';
      case 2:
        return '不合格';
      default:
        return '-';
    }
  };
  const caseCheckResultClass = (val) => {
    switch (val) {
      case 1:
        return 'checkBox1';
      case 2:
        return 'checkBox2';
      default:
        return '';
    }
  };

  const caseSex = (val) => {
    switch (val) {
      case 1:
        return '男';
      case 2:
        return '女';
      default:
        return '-';
    }
  };

  const caseSafeLevel = (val) => {
    if (val == 1) {
      return 'color: #02AD82';
    } else if (val == 2) {
      return 'color: #F5820F';
    } else if (val > 3) {
      return 'color: #E22C4C';
    }
  };
  const caseSafeLevel2 = (val) => {
    if (val == 1) {
      return '安全';
    } else if (val == 2) {
      return '中等';
    } else if (val >= 3) {
      return '危险';
    }
  };

  const caseTaskStatus = (val) => {
    switch (val) {
      case 1:
        return '未开始';
      case 2:
        return '进行中';
      case 4:
        return '待处理';
      case 5:
        return '已结束';
      case 6:
        return '待回证';
      default:
        return '-';
    }
  };

  const renderType = (val) => {
    if (val) {
      let arr = val.split(',');
      let nameArr = [] as any;
      arr.map((item) => {
        if (item == 0) {
          nameArr.push('受案登记');
        } else if (item == 1) {
          nameArr.push('当场处罚');
        } else if (item == 2) {
          nameArr.push('责令改正');
        }
      });
      return nameArr.join(',');
    }
  };
  // const caseChecked = (val) => {
  //   switch (val) {
  //     case 0:
  //       return false;
  //     case 1:
  //       return true;
  //     default:
  //       break;
  //   }
  // };

  const photoList = ref([] as any);
  const buseLicenceList = ref([] as any);

  const checkerSign = ref([] as any);
  const enterpriserSign = ref('');
  const photoUrls = ref([] as any);

  onMounted(async () => {
    async function fetchData(url) {
      try {
        const response = await fetch(url);
        if (!response.ok) {
          throw new Error(`Network response was not ok: ${response.statusText}`);
        }
        const data = await response.text(); // 或者使用 response.text() 或其他适当的方法

        return data;
      } catch (error) {
        console.error('There has been a problem with your fetch operation:', error);
      }
    }

    if (props.id) {
      const data = await taskxfInfo(props.id);
      taskData.value = data;

      if (data.placeInfo.latitude != '' && data.placeInfo.longitude != '') {
        formState.latitude = data.placeInfo.latitude;
        formState.longitude = data.placeInfo.longitude;
        tudeValue.value = `${formState.longitude}, ${formState.latitude}`;
      }

      taskCheckFillList.value = data.taskCheckFillList;

      if (taskData.value.photoList?.length) {
        taskData.value.photoList.map((item) => {
          bindFileUrl(item).then((res) => {
            photoList.value.push(res);
          });
        });
      }
      if (taskData.value.buseLicenceList?.length) {
        taskData.value.buseLicenceList.map((item) => {
          bindFileUrl(item).then((res) => {
            buseLicenceList.value.push(res);
          });
        });
      }
      if (taskData.value.taskCheckFillList?.length) {
        taskData.value.taskCheckFillList.map(async (item) => {
          let arr = [] as any;
          const ret = item.photoUrls.map(async (items) => {
            const res = await bindFileUrl(items);
            arr.push(res);
            return res;
            // bindFileUrl(items).then((i) => {
            //   arr.push(i);
            // });
            // return bindFileUrl(items);
          });
          await Promise.all(ret);
          item.photoUrls = arr;
        });
      }
      setTimeout(() => {
        hasShowImg.value = true;
      }, 1000);
      if (taskData.value.checkerSign) {
        taskData.value.checkerSign.split(',').map((item) => {
          bindFileUrl(item).then((res) => {
            let url = fetchData(res);
            Promise.all([url]).then((values) => {
              checkerSign.value.push(values[0]);
            });
          });
        });
      }
      if (taskData.value.enterpriserSign) {
        bindFileUrl(taskData.value.enterpriserSign).then((res) => {
          let url = fetchData(res);
          Promise.all([url]).then((values) => {
            enterpriserSign.value = values[0] as string;
          });
        });
      }
    }
  });
</script>
<style lang="less" scoped>
  .taskInfo {
    background-color: rgba(255, 255, 255, 1);

    &-top {
      &-tittle {
        padding: 0px 0 16px 0;
        font-size: 18px;
        font-weight: 700;
        line-height: 26px;
        color: rgba(68, 68, 68, 1);

        border-bottom: 1px solid rgba(240, 240, 240, 1);
      }
    }

    &-body {
      &-box {
        margin-bottom: 16px;

        &-tittle {
          display: flex;
          align-items: center;
          padding: 13px 0 13px 0;

          &-left {
            border: 1px solid #0f53ac;
            margin-right: 7px;
            border-radius: 4px;
            height: 14px;
          }

          &-right {
            font-size: 16px;
            font-weight: 400;
            line-height: 24px;
            color: rgba(68, 68, 68, 1);
          }
        }

        &-info {
          :global(.ant-descriptions-item-label) {
            width: 160px;
          }
        }
      }
    }

    .bottomBox {
      height: 60px;
    }

    .bottomBtns {
      width: calc(100% - 240px);
      padding: 8px 20px;
      background: rgba(255, 255, 255, 1);
      border-top: 1px solid rgba(240, 240, 240, 1);
      position: fixed;
      bottom: 0;
      text-align: right;
    }

    .checkBox1 {
      width: 52px;
      height: 24px;
      font-size: 12px;
      background: #ebf8e5;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 12px;
      color: #09b840;
    }

    .checkBox2 {
      width: 52px;
      height: 24px;
      font-size: 12px;
      background: #fff2f0;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 12px;
      color: #ff4d4f;
    }

    .tigs {
      width: 42px;
      height: 20px;
    }
  }
</style>
